<template>
	<view class="uni-bczyw-index uni-bczyw-out">
		<view :class="'example-header example-header-bg' + current">
			<view class="search-content">
				<view class="search-border" @click="toSearch">
					<uni-icons type="search" color="#acacac"></uni-icons>
					<text class="search-text">搜索</text>
				</view>
				<view class="user-avatar-view">
					<image class="user-avatar" :src="avatarUrl" @error="imageError" @click="toUcenter"></image>
				</view>
			</view>
			<view class="example-header-bottom">
				<uni-swiper-dot @clickItem="clickItem" :info="bannerList" :current="current" field="content"
					mode="round">
					<swiper class="swiper-box" @change="changeSwiper" :current="swiperDotIndex" :autoplay="true"
						:interval="interval">
						<swiper-item v-for="(item, index) in bannerList" :key="item._id">
							<view class="swiper-item">
								<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill"
									:draggable="false" />
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
		</view>
		<view>
			<uni-notice-bar show-icon scrollable :speed="30" color="#ff6600" background-color="" :text="noticeText" />
		</view>
		<!-- 宫格 -->
		<view class="example-body">
			<uni-grid :column="5" :showBorder="false" :square="false" :highlight="true">
				<navigator url="/pages/index/index" open-type="switchTab" hover-class="navigator-hover">
					<uni-grid-item>
						<view class="grid-item-box">
							<uni-icons custom-prefix="uciconfont" class="icon-class" color="#ff6600" size="30"
								type="icon-daxue"></uni-icons>
							<text class="text">功能1</text>
						</view>
					</uni-grid-item>
				</navigator>
				<uni-grid-item>
					<navigator url="/pages/index/index" hover-class="navigator-hover">
						<view class="grid-item-box">
							<uni-icons custom-prefix="uciconfont" class="icon-class1" color="#ff6600" size="28"
								type="icon-zhuanyeshuyukepu"></uni-icons>
							<text class="text">功能2</text>
						</view>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="/pages/index/index" hover-class="navigator-hover">
						<view class="grid-item-box">
							<uni-icons custom-prefix="uciconfont" class="icon-class" color="#ff6600" size="28"
								type="icon-zhiye1"></uni-icons>
							<text class="text">功能3</text>
						</view>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="/pages/index/index" hover-class="navigator-hover">
						<view class="grid-item-box">
							<uni-icons custom-prefix="uciconfont" class="icon-class1" color="#ff6600" size="28"
								type="icon-list-1-copy"></uni-icons>
							<text class="text">功能4</text>
						</view>
					</navigator>
				</uni-grid-item>
				<navigator url="/pages/index/index" open-type="switchTab" hover-class="navigator-hover">
					<uni-grid-item>
						<view class="grid-item-box">
							<uni-icons custom-prefix="uciconfont" class="icon-class" color="#ff6600" size="30"
								type="icon-tianbaozhaiyaobaogao"></uni-icons>
							<text class="text">功能5</text>
						</view>
					</uni-grid-item>
				</navigator>
			</uni-grid>
		</view>
		<view style="padding: 15px 0;">
			<view style="padding: 0 15px;margin-bottom: 5px;">
				<uni-segmented-control :current="hotCurrent" :values="hotItems" style-type="button"
					:active-color="activeColor" @clickItem="onClickHotItem" />
			</view>
			<view v-if="hotCurrent === 0">
				<view class="uni-list-rmyx">
					<!-- 加载状态：more上拉加载更多，loading加载中，no-more没有更多数据了，加载错误 -->
					<uni-load-more style="height: 200px;" v-if="loadingStatus" status="loading"></uni-load-more>
					<uni-list class="uni-list" :border="false">
						<!-- 列表渲染 -->
						<uni-list-item  to="/pages/index/index" :border="false">
							<!-- 通过body插槽定义布局、 -->
							<template v-slot:body>
								<view class="special-main">
									<text class="special-title">内容11111</text>
									<view class="special-feature">
										<view style="margin-bottom: 10rpx;">内容类别：内容类别 /内容类别 / 内容类别</view>
										<view>内容类别：内容类别&nbsp;&nbsp;&nbsp;&nbsp;</view>
										<view>>内容类别：内容类别</view>
									</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
			<view v-if="hotCurrent === 1">
				<view class="uni-list-rmzy">
					<!-- 加载状态：more上拉加载更多，loading加载中，no-more没有更多数据了，加载错误 -->
					<uni-load-more style="height: 200px;" v-if="loadingStatus" status="loading"></uni-load-more>
					<uni-list class="uni-list" :border="false">
						<!-- 列表渲染 -->
						<uni-list-item  to="/pages/index/index" :border="false">
							<!-- 通过body插槽定义布局、 -->
							<template v-slot:body>
								<view class="special-main">
									<text class="special-title">内容222222222</text>
									<view class="special-feature">
										<view style="margin-bottom: 10rpx;">内容类别：内容类别 /内容类别 / 内容类别</view>
										<view>内容类别：内容类别&nbsp;&nbsp;&nbsp;&nbsp;</view>
										<view>>内容类别：内容类别</view>
									</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
	export default {
		components: {
			statusBar
		},
		data() {
			return {
				"bannerList": [{
						"bannerfile": {
							"url": "https://gkms.bckjkj.com/profile/uni/images/wx-index1.jpg",
						}
					},
					{
						"bannerfile": {
							"url": "https://gkms.bckjkj.com/profile/uni/images/wx-index2.jpeg",
						}
					}, {
						"bannerfile": {
							"url": "https://gkms.bckjkj.com/profile/uni/images/wx-index3.png",
						}
					}
				],
				current: 0,
				swiperDotIndex: 0,
				interval: 3000,
				gkbkTimelist: [],
				stepActive: 2,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 5,
					uniLevel: '1',
					//为了隐藏more组件，加载数据后会重新计算
					maxPage: 1
				},
				loadingStatus: false,
				list: [],
				listSpecial: [],
				noticeText: "",
				hotItems: ['热门内容1', '热门内容2'],
				hotCurrent: 0,
				activeColor: '#ff6600',
				avatarUrl: ''
			}
		},
		onShow() {
			if (this.$isLogin()) {
				let userInfoTemp = uni.getStorageSync('gkms-userInfo');
				if (userInfoTemp.avatar !== "") {
					this.avatarUrl = this.$baseUrl + userInfoTemp.avatar
				} else {
					this.avatarUrl = 'https://gkms.bckjkj.com/profile/uni/images/default-avatar.jpg'
				}
			} else {
				this.avatarUrl = 'https://gkms.bckjkj.com/profile/uni/images/default-avatar1.jpeg'
			}
		},
		onLoad() {
			this.$dict('wx_inde_notice').then((res) => {
				this.noticeText = res[0].value
			})
			this.loadUniData()
			this.loadSpecialData()
		},
		methods: {
			change(e) {
				uni.showToast({
					title: this.$t('grid.clickTip') + " " + `${e.detail.index + 1}` + " " + this.$t(
						'grid.clickTipGrid'),
					icon: 'none'
				})
			},
			/**
			 * banner加载后触发的回调
			 */
			onqueryload(data) {},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			/**
			 * 点击banner的处理
			 */
			clickBannerItem(item) {
				// 有外部链接-跳转url
				if (item.open_url) {
					uni.navigateTo({
						url: '/pages/common/webview/webview?url=' + item.open_url + '&title=' + item.title,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				// 其余业务处理
			},
			// 加载大学数据
			loadData() {
				this.loadingStatus = true
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/index/search'
				})
			},
			onClickHotItem(e) {
				if (this.hotCurrent !== e.currentIndex) {
					this.hotCurrent = e.currentIndex
				}
			},
			toUcenter(){
				uni.switchTab({
					url:"/pages/ucenter/index"
				})
			},
			imageError() {
				this.avatarUrl = "https://gkms.bckjkj.com/profile/uni/images/default-avatar.jpg"
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}
	.search-content{
		display: flex;
		align-items: center;
		height: 35px;
		padding: 10px;
		.search-border{
			width: 80%;
			border-radius: 25px;
			line-height:35px;
			background-color: #FFF;
			color: #acacac;
			padding: 0 20px;
		}
		.search-text{
			margin-left: 5px;
		}
		.user-avatar-view{
			display: flex;
			align-items: center;
			padding-left: 5px;
			.user-avatar{
				width: 35px;
				height: 35px;
				border-radius: 25px;
			}
		}
	}
	.example-header {
		height: 400rpx;
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 40px;
		margin-bottom: 85rpx;
	}

	.example-header-bg0 {
		background: linear-gradient(#29808b, #45e6f1);
	}

	.example-header-bg1 {
		background: linear-gradient(#0074b3, #00aaff);
	}

	.example-header-bg2 {
		background: linear-gradient(#9eb5b5, #d7f4f4);
	}

	.example-header-bottom {
		width: 90%;
		margin: 0 auto;
	}

	.swiper-box {
		width: 100%;
		height: 340rpx;
	}

	.banner-image {
		width: 100%;
		height: 340rpx;
		border-radius: 10px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */

	.uni-bczyw-index {
		background-color: #fff;
	}

	.example-body {
		flex-direction: column;
		padding: 0 15px;
		background-color: #ffffff;
	}


	.text {
		text-align: center;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 5px 0;
		background-color: #fff;
	}

	.icon-class {
		height: 34px;
		padding-top: 6px;
	}

	.icon-class1 {
		height: 30px;
		padding-top: 10px;
	}

	.step {
		margin: 10px 15px 0 15px;
		padding: 10px 0;
		border-top: 1px #B7BDC6 dashed;
		border-bottom: 1px #B7BDC6 dashed;
	}

	// 热门院校
	.uni-list-rmyx {
		margin: 0 15px;
	}
	
	// 热门专业
	.uni-list-rmzy {
		margin: 0 15px;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		margin-right: 30rpx;
	}

	.main {
		justify-content: space-between;
		flex: 1;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #545454;
		}

		.note {
			flex-direction: row;
			color: #ff6600;
			margin-top: 15rpx;
		}
	}

	.special-main {
		justify-content: space-between;
		flex: 1;

		.special-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #545454;
		}

		.special-feature {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 5px;
			color: #868686;
		}
	}
</style>
<style lang="scss">
	.uni-bczyw-out {
		.uni-noticebar {
			margin-bottom: 0 !important;
			padding: 0 15px !important;
		}
	}
	.uni-list-rmyx{
		.uni-list-item__container {
			background-image: linear-gradient(45deg, #fff 35%, #f2f4f5 70%, #eff8ff 60%);
			margin-bottom: 10px;
		}
	}
	.uni-list-rmzy{
		.uni-list-item__container {
			background-image: linear-gradient(to right bottom, #edf8ff, #fff, #fff, #edf8ff);
			border-radius: 10px;
			margin-bottom: 10px;
		}
	}
</style>
